<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册-北大青鸟用户中心</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div#signin {
				padding: 80px;
			}

			div#signin input {
				border: none;
				/* height: 40px; */
			}

			div#signin p {
				border: 1px solid darkgray;
				width: 300px;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				margin-top: 20px;
			}

			/* div#signin span{
				float: left;
				margin-left: 340px;
			} */
			div#signin #email,
			#user,
			#pass1,
			#pass2,
			#verify {
				color: gray;
			}

			img {
				vertical-align: middle;
				margin-left: 10px;
				margin-right: 10px;
			}

			div#signin #verify .cc {
				display: inline-block;
				position: absolute;
				left: 300px;
				top: 351px;

				border: 1px solid #A9A9A9;
			}

			div#signin #verify p {
				width: 210px;
			}

			div#signin #check {
				/* vertical-align: middle; */
				/* position: absolute;
				left: 160px;
				top: 400px;
				display: inline-block; */
				margin-top: 30px;
				margin-left: 50px;
				/* border: 1px solid red; */
			}

			div#signin #sign input {
				margin-top: 20px;
				margin-left: 40px;
				width: 15em;
				height: 3em;
				background-color: #55ABE8;
				border-radius: 5px;
			}

			.error {
				background: url(images/untitled.png) 0 0 no-repeat;
				font-size: 15px;
				color: red;
				padding-left: 20px;
			}

			.suc {
				background: none;
				color: red;
				font-size: 10px;
			}
		</style>
		<script src="../jquery-3.2.0.js" type="text/javascript">			
		</script>
		<script type="text/javascript">
			$(function(){
				$("#youxiang").blur(function(){
					var a=$(this).val();
					var b=/^[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/gi;
					if(b.test(a)){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("邮箱格式不正确");
						return false;
					}
				});
				$("#nicheng").blur(function(){
					var c=$(this).val();
					var d=/^[A-Za-z0-9\u4E00-\u9FA5\uf900-\ufa2d]+$/gi;
					if(c.length<4||c.length>12||!d.test(c)){
						$(this).next().removeClass("suc").addClass("error").html("4-12位字符、英文、数字或者中文");
						return false;
					}else{
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}
				});
				$("#mima").blur(function(){
					var e=$(this).val();
					var f=/^[\w]{6,16}$/gi;
					if(!f.test(e)){
						$(this).next().removeClass("suc").addClass("error").html("6-16位字符英文数字或者中文");
						return false;
					}else{
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}
				});
				$("#mima2").blur(function(){
					var g=$(this).val();
					if(g.length==0){
						$(this).next().removeClass("suc").addClass("error").html("密码不能为空");
						return false;
					}
					if(g==e){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("两次密码不一致");
						return false;
					}
				});
				$("#yanzhengma").blur(function(){
					var h=$(this).val();
					if(h=="sice"){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("验证码不正确");
						return false;
					}
				});
				
				
				$("form").submit(function(){
					var $email = $("#youxiang");
					var y = $email.val();
					var zhengze=/^[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/gi;
					if(zhengze.test(y)){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("邮箱格式不正确");
						return false;
					}
					
					var $user=$("#nicheng");
					var ni=$user.val();
					var zhengze=/^[A-Za-z0-9\u4E00-\u9FA5\uf900-\ufa2d]+$/gi;
					if(ni.length<4||ni.length>12||!zhengze.test(ni)){
						$(this).next().removeClass("suc").addClass("error").html("4-12位字符、英文、数字或者中文");
						return false;
					}else{
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}
					
					var $pass1=$("#mima");
					var p1=$pass1.val();
					var zhengze=/^[\w]{6,16}$/gi;
					if(!zhengze.test(p1)){
						$(this).next().removeClass("suc").addClass("error").html("6-16位字符英文数字或者中文");
						return false;
					}else{
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}
					
					var $pass2=$("#mima2");
					var p2=$pass2.val();
					if(p2.length==0){
						$(this).next().removeClass("suc").addClass("error").html("密码不能为空");
						return false;
					}
					if(p2==p1){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("两次密码不一致");
						return false;
					}
					
					var $verify=$("#yanzhengma");
					var v=$verify.val();
					if(v=="sice"){
						$(this).next().removeClass("error").addClass("suc").html("");
						return true;
					}else{
						$(this).next().removeClass("suc").addClass("error").html("验证码不正确");
						return false;
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="signin">
			<form action="#" method="post">
				<div id="email">
					<p><img src="images/login-input5.png" /><input type="email" name="email" placeholder="请输入您的常用邮箱" id="youxiang" /><span></span></p>
					<span id="d1">
						请输入您的常用邮箱
					</span>
				</div>
				<div id="user">
					<p><img src="images/login-input1.png" /><input type="text" name="user" placeholder="请输入昵称" id="nicheng" /><span></span></p>
					<span id="d1">
						4-12位字符、英文、数字或者中文均可
					</span>
				</div>
				<div id="pass1">
					<p><img src="images/login-input2.png" /><input type="password" name="password1" placeholder="请输入密码" id="mima" /><span></span></p>
					<span id="d1">
						6-16位字符英文数字或者中文均可
					</span>
				</div>
				<div id="pass2">
					<p><img src="images/login-input2.png" /><input type="password" name="password2" placeholder="请再次输入密码" id="mima2" /><span></span></p>
				</div>
				<div id="verify">
					<p><img src="images/login-input3.png" /><input type="text" placeholder="请输入右侧验证码" id="yanzhengma" /><span></span></p>
					<span class="cc"><input type="image" src="images/yanzhengma.png" /></span>
				</div>
				<div id="check">
					<input type="checkbox" value="" />同意<a href="#">用户服务条款</a>
				</div>
				<div id="sign">
					<input type="submit" value="注册" />
				</div>

			</form>
		</div>

	</body>
</html>
